import React, { useEffect, useState } from 'react';
import { connect, history } from 'umi';
import { Form, Button, Card, Modal, Row, Col, Badge } from 'antd';
const SaleTypeModel = (props) => {
    const { visible = {}, onClose } = props
    const { location = {} } = history
    const { query = {} } = location
    const { accessId } = query
    const { show = false, detail = {} } = visible
    const { orderSn } = detail
    const [saleType, setSaleType] = useState('updateShop')
    const list = [
        { title: "等价（更换商品）", value: 'onlyChangeGoods', content: "指需要修改更换商品，且为等价商品之间修改更换商品。" },
        { title: "加收/退款（更换商品）", value: 'changeGoods', content: "指需要修改更换商品，且为低底价商品修改为高底价商品需要加收或高底价商品修改为低底价商品需要退款。        " },
        { title: "仅加收（不变商品）", value: 'recharge', content: "指仅修改价格增加收款，原来商品不做任何调整。 " },
        { title: "仅退款（不变商品）", value: 'refund', content: "指仅修改价格减少收款，原来商品不做任何调整。" }
    ]
    const handleUpAudit = () => {
        onClose()
        history.push({
            pathname: '/order/orderAfterSales',
            query: {
                accessId,
                orderSn,
                updateSale: saleType,
                afterSaleFrom: 'admin'
            }
        })

    }
    const modalProps = {
        title: `选择售后类型 `,
        visible: show,
        width: 900,
        maskClosable: true,
        destroyOnClose: true,
        zIndex: 1001,
        onCancel: onClose,
        onOk: handleUpAudit
    };

    return <Modal {...modalProps}>
        <Row gutter={[12, 12]}>
            {list.map(item => {
                const { title, value, content } = item
                return value === saleType ? <Col span={8}>
                    <Badge.Ribbon color="magenta" text={'已选中'}>
                        <Card title={title} size="small" style={{ cursor: 'pointer' }}>
                            {content}
                        </Card>
                    </Badge.Ribbon></Col> : <Col onClick={() => {
                        setSaleType(value)
                    }} span={8}>
                    <Card title={title} size="small" style={{ cursor: 'pointer' }}>
                        {content}
                    </Card></Col>
            })}

        </Row>
    </Modal>

}

export default connect(({ loading }) => ({
    loading: loading.effects['commission/fakeConfirmDistribute'],
}))(SaleTypeModel);